<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{title}}</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="/statics/css/users.css"/>
    <script src="https://unpkg.com/vue@2.5/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
    <div id="app">
        <el-container>
            <el-header style="height:50px;">
                <img src="/statics/images/logo.gif" alt="">
                <div>心语博客</div>
            </el-header>
            <a href="http://localhost:8080/index"><svg t="1730769079151" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2134" width="12" height="12"><path d="M282 512c0 19 7.2 38 21.7 52.5l385.7 386.1c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L349 519.3c-4-4-4-10.5 0-14.5l385.7-386.1c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L303.7 459.5C289.2 474 282 493 282 512z" p-id="2135"></path></svg>返回</a>
            <el-main>
                <h3>{{head}}</h3>
                <el-row>
                    <el-col class='user' :span="4" v-for="user in users" :key="user.userId"  style="background: #FFF">
                        <div>
                            <el-avatar :size="80" :src="user.avatar"></el-avatar>
                        </div>
                        <div class="nickname">
                            {{user.nickname}}
                        </div>
                        <div>
                            <i v-if="user.isMutual" class="el-icon-connection"></i>
                        </div>
                        <section>
                            <i class="el-icon-error" @click="delAttention(user.userId)"></i>
                        </section>
                    </el-col>
                </el-row>
                <el-pagination layout="prev, pager, next"
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page.sync="pageParam.current"
                     :page-size="pageParam.size" :total="totalNumber">
                </el-pagination>
            </el-main>
            <el-footer height="169px">
                &copy;copy right
            </el-footer>
        </el-container>
    </div>
    <script src="/statics/js/request.js"></script>
    <script>
        new Vue({
            el: '#app',
            data(){
                return {
                    title:'',
                    head:'',
                    users:[],
                    search:'',
                    pageParam: {
                        current:1,
                        size:24
                    },
                    totalNumber:0
                }
            },
            created(){
                this.initAttention()
            },
            methods:{
                async initAttention(){
                    let urlArr = window.location.pathname.split("/");
                    let key = urlArr[urlArr.length - 1]
                    this.head = key === 'followers' ? "我关注的人" : "关注我的人"
                    switch (key){
                        case "followers":
                            await request.post("/followersOfPage",this.pageParam,{key:this.search },res=>{
                                this.pageParam.size = res.size
                                this.pageParam.current = res.current
                                this.totalNumber = res.totalNumber
                                this.users = res.list
                            })
                            break;
                        case "followed":
                            await request.post("/followedsOfPage",this.pageParam,{key:this.search },res=>{
                                this.pageParam.size = res.size
                                this.pageParam.current = res.current
                                this.totalNumber = res.totalNumber
                                this.users = res.list
                            })
                            break;
                    }
                },
                handleSizeChange(val){ // 每页val条
                    this.pageParam.size = val
                    switch (this.head){
                        case "followers":
                            request.post("/followersOfPage",this.pageParam,{key:this.search },res=>{
                                this.pageParam.size = res.size
                                this.pageParam.current = res.current
                                this.totalNumber = res.totalNumber
                                this.users = res.list
                            })
                            break;
                        case "followeds":
                            request.post("/followedsOfPage",this.pageParam,{key:this.search },res=>{
                                this.pageParam.size = res.size
                                this.pageParam.current = res.current
                                this.totalNumber = res.totalNumber
                                this.users = res.list
                            })
                            break;
                    }
                },
                handleCurrentChange(val) {
                    this.pageParam.current = val
                    switch (this.head){
                        case "followers":
                            request.post("/followersOfPage",this.pageParam,{key:this.search },res=>{
                                this.users = res
                            })
                            break;
                        case "followeds":
                            request.post("/followedsOfPage",this.pageParam,{key:this.search },res=>{
                                this.users = res
                            })
                            break;
                    }
                },
                delAttention(id){
                    let type = 1
                    if (this.head == "followeds"){
                        type = 0
                    }
                    request.post("/delAttention",{type:type,id:id},res=>{
                        if(res){
                            this.initAttention()
                        }
                    })
                }
            }
        })
    </script>
</body>
</html>